$normal_width: 32vw;
$card_square_box_height: 70px;

.home {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
  padding: 10px;

  .iframe_box_left {
    width: 64vw;
    display: flex;
    flex-wrap: wrap;

    .homeBox {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;

      &.shortBox {
        .ant-card {
          width: calc($normal_width*2/3 - 15px);
        }
      }

      &.longBox {
        .ant-card {
          width: calc($normal_width - 15px);
        }
      }

      .cavBox {
        width: 100%;
        height: 200px;
        display: flex;
        flex-wrap: wrap;

        .small_pie {
          width: 150px;
          height: 200px;
        }

        .normal_pie {
          width: 100%;
          height: 200px;
        }

        .transverse_bar_msg_canvas {
          height: 100px;
          width: 100%;
        }


        .pie_msg_show {
          width: calc($normal_width*2/3 - 220px);
          margin-top: -20px;

          .pie_msg_line {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            font-size: 12px;
            color: #333;
            border-bottom: 1px dashed #eee;

            >div {
              width: 100%;
              text-align: left;
              height: 20px;
              line-height: 20px;
            }

            .pie_msg_line_content {
              font-size: 20px;
              height: 22px;
              line-height: 22px;
              text-align: right;
              padding-right: 0.5vw;
            }
          }
        }
      }
    }
  }

  .iframe_box_right {
    height: 370px;
    width: 32vw;
    display: flex;
    flex-wrap: wrap;

    .ant-card {
      width: calc($normal_width);
      margin-bottom: 15px;
    }
  }

}

.card_content {
  display: flex;

  .card_square_box {
    // min-width: 8vw;
    // max-width: 9vw;
    padding: 10px 10px;
    background: #f7f9fa;
    flex: 1;
    margin: 0 5px;

    .card_square_box_title {
      width: 100%;
      height: 30px;
      line-height: 15px;
      font-size: 12px;
      text-align: left;
    }

    .card_square_box_content {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 30px;
      text-align: left;
    }
  }
}